<template>
  <el-breadcrumb :separator-icon="Right">
    <el-breadcrumb-item>Comic Admin</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadcrumbs" :active="route.name === item.name">
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { Right } from '@icon-park/vue-next';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

defineOptions({
  name: 'breadcrumbs'
});

const route = useRoute();
// console.log(route);

const breadcrumbs = computed(() => {
  return route.matched.filter((v) => v.meta.title);
});
</script>

<style lang="scss" scoped></style>
